<template>
  <el-aside width="200px">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#409eff"
      :collapse="menuCollapse"
      :unique-opened="true"
      :router="true"
      @open="open"
    >
      <el-menu-item index="/index">
        <i class="iconfont homepage"></i>
        <span>首页</span>
      </el-menu-item>
      <template v-for="menu in memus">
        <el-submenu
          :key="menu.id"
          :index="'/' + menu.name"
          v-if="menu.hidden === 0"
        >
          <template slot="title">
            <!-- <i class="iconfont" :class="menu.icon"></i> -->
            <!-- <i :class="`iconfont ${menu.icon}`"></i> -->
            <i :class="['iconfont', menu.icon]"></i>
            <span>{{ menu.title }}</span>
          </template>
          <template v-for="sub in menu.children">
            <el-menu-item
              v-if="sub.hidden === 0"
              :key="sub.id"
              :index="`/${menu.name}/${sub.name}`"
            >
              <i :class="sub.icon" class="iconfont"></i>
              {{ sub.title }}
            </el-menu-item>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </el-aside>
</template>
 
<script>
export default {
  data() {
    return {
      activeIndex: '/index'
    }
  },
  props: {
    menuCollapse: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    memus() {
      return this.$store.getters.menus
    }
  },
  created() {
    this.activeIndex = this.$route.path
  },
  methods: {
    open(index) {
      // console.log(index);
      this.$router.push(index)
    }
  },
  watch: {
    "$route.path"() {
      // console.log(123);
      this.activeIndex = this.$route.path
      // 如果将来遇上 数据更改了，但是视图没有更新
      // vue2里面提供了一个方法，用于强制刷新视图
      // this.$forceUpdate()
    }
  }
}
</script>
 
<style lang = "less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-aside {
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
  .el-menu {
    height: calc(100vh - 80px);
  }
  .is-active.el-menu-item {
    .iconfont {
      color: #409eff !important;
    }
  }
}
</style>